<template>
  <div class="select_com">
    <div class="select_left">
      <div class="select_arrow" @click="recommendClick">推荐</div>
      <div class="distance select_arrow" @click="distanceClick">
        <span>距离</span>
        <span class="arrow_box">
          <i
            class="iconfont rotate iconicon_xuanze_sel"
            :class="{ active: distanceTag === false }"
          ></i>
          <i
            class="iconfont  iconicon_xuanze_sel"
            :class="{ active: distanceTag === true }"
          ></i>
        </span>
      </div>
      <div class="grade select_arrow" @click="gradeClick">
        <span>评分</span>
        <span class="arrow_box">
          <i
            class="iconfont rotate iconicon_xuanze_sel"
            :class="{ active: gradeTag === false }"
          ></i>
          <i
            class="iconfont  iconicon_xuanze_sel"
            :class="{ active: gradeTag === true }"
          ></i>
        </span>
      </div>
    </div>
    <div class="select_right" @click="selectClick" :class="{ active: popShow }">
      筛选
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'SelectCom',
  data () {
    return {
      distanceTag: '',
      gradeTag: ''
    }
  },
  props: {
    popShow: {
      type: Boolean,
      default: false
    },
    show: {
      type: Boolean,
      default: false
    },
    selectData: {
      type: Object
    }
  },
  model: {
    prop: 'popShow'
  },
  mounted () {
    this.$bus.$on('initStyle', () => {
      this.distanceTag = ''
      this.gradeTag = ''
    })
  },
  beforeDestroy () {
    this.$bus.$off('initStyle')
  },
  methods: {
    ...mapMutations('company', [
      'changeReset',
      'initForm',
      'setDistance',
      'setScore',
      'initList'
    ]),
    distanceClick () {
      this.distanceTag = !this.distanceTag
      this.distanceTag
        ? (this.selectData.distance_active = 'desc')
        : (this.selectData.distance_active = 'asc')
      this.initForm()
      this.changeReset(true)
      this.setDistance(this.selectData.distance_active)
      this.$bus.$emit('getCompanyData', { isScrollTop: true, isFinish: false })
      // 重置样式
      this.gradeTag = ''
    },
    gradeClick () {
      this.gradeTag = !this.gradeTag
      this.gradeTag
        ? (this.selectData.grade_active = 'desc')
        : (this.selectData.grade_active = 'asc')
      this.initForm()
      this.changeReset(true)
      this.setScore(this.selectData.grade_active)
      this.$bus.$emit('getCompanyData', { isScrollTop: true, isFinish: false })
      // 重置样式
      this.distanceTag = ''
    },
    selectClick () {
      this.$emit('input', true)
      this.$emit('update:show', true)
    },
    // 推荐
    recommendClick () {
      // 重置样式
      this.gradeTag = ''
      this.distanceTag = ''
      // 清除距离-评分选中
      this.selectData.distance_active = ''
      this.selectData.grade_active = ''
      this.changeReset(true)
      this.initForm()
      // this.initList()
      this.$bus.$emit('getCompanyData', { isScrollTop: true, isFinish: false })
    }
  }
}
</script>

<style scoped lang="less">
.select_com {
  display: flex;
  align-items: center;

  .select_left {
    display: flex;
    flex: 1;
    .select_arrow {
      display: flex;
      align-items: center;
      width: 90px;
      height: 40px;
      font-family: PingFangSC-Regular;
      font-size: 28px;
      color: #222222;
      letter-spacing: 0.32px;
      font-weight: 400;
      margin-right: 80px;

      .arrow_box {
        display: flex;
        flex-direction: column;
        width: 31px;
        height: 30px;
        justify-content: center;
        align-items: center;
        & i {
          line-height: 18px;
          &.active {
            color: #e40137;
          }
        }
        .rotate {
          transform: rotate(180deg);
        }
      }
    }
  }
  .select_right {
    // flex: 1;
    width: 90px;
    height: 40px;
    font-family: PingFangSC-Regular;
    font-size: 28px;
    color: #222222;
    letter-spacing: 0.32px;
    font-weight: 400;
    text-align: right;
    &.active {
      color: #e40137;
    }
  }
}
</style>
